<template>
  <div class="local-deploy p-4">
    <el-card class="box-card">
      <template #header>
        <div class="card-header flex items-center justify-between">
          <h2 class="text-xl font-bold">本地文件部署</h2>
          <div class="flex gap-2">
            <el-button @click="testFetchDirectories" type="primary" size="small">测试获取目录</el-button>
            <el-button @click="goBack">返回</el-button>
          </div>
        </div>
      </template>

      <!-- 项目选择 -->
      <div class="project-select mb-6">
        <h3 class="text-lg font-semibold mb-4">选择项目</h3>
        <el-select
          v-model="selectedDirectoryId"
          placeholder="选择项目"
          class="w-full"
          :loading="directoriesLoading"
          @change="handleDirectoryChange"
          value-key="id"
          clearable
          filterable
        >
          <el-option
            v-for="dir in directories"
            :key="dir.id"
            :label="dir.name"
            :value="dir.id"
          >
            <div class="flex justify-between items-center">
              <span>{{ dir.name }}</span>
              <span class="text-gray-400 text-xs">{{ dir.path }}</span>
            </div>
          </el-option>
        </el-select>
        <div class="text-xs text-gray-400 mt-1" v-if="selectedDirectoryId && !filesLoading">
          项目目录路径: {{ selectedDirectory?.path }}
        </div>
        <div class="text-xs text-gray-400 mt-1" v-if="selectedDirectoryId && files.length > 0">
          可部署版本数: {{ files.length }} 个
        </div>
        <div class="mt-2 flex justify-end" v-if="selectedDirectoryId">
          <el-button type="primary" size="small" @click="refreshVersions()" :loading="filesLoading">
            <el-icon class="mr-1"><refresh /></el-icon>
            刷新版本列表
          </el-button>
        </div>
      </div>

      <div v-if="selectedDirectoryId && !filesLoading && files.length === 0" class="empty-files-tip my-6">
        <el-empty description="没有找到可部署的文件">
          <template #description>
            <p>在选定的目录中未找到ZIP文件</p>
            <p class="text-gray-500 text-xs mt-2">目录路径: {{ selectedDirectory?.path }}</p>
          </template>
        </el-empty>
      </div>

      <div v-if="filesLoading" class="files-loading my-6">
        <div class="flex justify-center mb-4">
          <el-skeleton :rows="3" animated />
        </div>
        <div class="text-center text-gray-500">
          <p>正在获取可部署版本列表...</p>
        </div>
      </div>

      <!-- 版本选择 - 表单风格 -->
      <div v-if="selectedDirectoryId" class="mb-6">
        <h3 class="text-lg font-semibold mb-4">选择版本</h3>
        <el-form :model="deployForm" label-position="top">
          <el-form-item label="版本选择" required>
            <el-select 
              v-model="selectedVersion"
              placeholder="请选择版本"
              class="w-full"
              :loading="filesLoading"
              @change="handleVersionChange"
              :disabled="files.length === 0 || filesLoading"
              filterable
              clearable
            >
              <template #prefix>
                <el-icon><document /></el-icon>
              </template>
              <el-option
                v-for="file in files"
                :key="file.file_name"
                :label="`${file.version} (${file.build_date})`"
                :value="file.file_name"
              >
                <div class="flex flex-col">
                  <div class="flex items-center">
                    <el-tag size="small" class="mr-2" type="success">{{ file.version }}</el-tag>
                    <span>{{ file.build_date }}</span>
                  </div>
                  <span class="text-gray-400 text-xs mt-1">{{ file.file_name }}</span>
                </div>
              </el-option>
            </el-select>
            <div class="text-xs text-gray-400 mt-1" v-if="selectedFile">
              选中版本: {{ selectedFile.version }} ({{ selectedFile.build_date }})
            </div>
          </el-form-item>
        </el-form>
        
        <div v-if="files.length > 0" class="files-container">
          <h3 class="text-lg font-semibold mb-4">可部署文件</h3>
          
          <!-- 文件过滤和排序 -->
          <div class="filters flex items-center gap-4 mb-4">
            <el-input
              v-model="fileFilter"
              placeholder="输入文件名称筛选"
              clearable
              class="w-64"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>

            <el-select 
              v-model="sortOption" 
              placeholder="排序方式"
              class="w-48"
            >
              <el-option label="修改时间 (最新)" value="time-desc" />
              <el-option label="修改时间 (最早)" value="time-asc" />
              <el-option label="文件大小 (最大)" value="size-desc" />
              <el-option label="文件大小 (最小)" value="size-asc" />
              <el-option label="文件名称 (A-Z)" value="name-asc" />
              <el-option label="文件名称 (Z-A)" value="name-desc" />
            </el-select>
          </div>
          
          <!-- 文件列表 -->
          <el-table
          :data="filteredFiles"
          style="width: 100%"
          @row-click="handleSelectFile"
          highlight-current-row
          :row-class-name="getRowClassName"
        >
          <el-table-column prop="file_name" label="文件名称" min-width="240" show-overflow-tooltip>
            <template #default="{ row }">
              <div class="flex items-center">
                <el-icon class="mr-2"><document /></el-icon>
                <span>{{ row.file_name }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="version" label="版本" width="120">
            <template #default="{ row }">
              <el-tag size="small">{{ row.version }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="build_date" label="构建日期" width="150" />

          <el-table-column prop="size_human" label="大小" width="120" />
          
          <el-table-column prop="modified_time" label="修改时间" width="170" />

          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click.stop="selectFileToDeply(row)">部署</el-button>
            </template>
          </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>

    <!-- 部署对话框 -->
    <el-dialog
      v-model="deployDialogVisible"
      title="确认部署"
      width="500px"
    >
      <div v-if="selectedFile" class="deploy-dialog-content">
        <div class="file-info mb-4">
          <h4 class="font-semibold">已选择文件信息</h4>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="文件名称">
              <div class="flex items-center">
                <el-icon class="mr-2"><document /></el-icon>
                <span>{{ selectedFile.file_name }}</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="版本">
              <el-tag size="small" type="success">{{ selectedFile.version }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="构建日期">{{ selectedFile.build_date }}</el-descriptions-item>
            <el-descriptions-item label="文件大小">{{ selectedFile.size_human }}</el-descriptions-item>
            <el-descriptions-item label="修改时间">{{ selectedFile.modified_time }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <el-form ref="deployFormRef" :model="deployForm" :rules="rules" label-width="100px">
          <el-form-item label="版本号" prop="version">
            <el-input v-model="deployForm.version" placeholder="版本号" disabled />
          </el-form-item>

          <el-form-item label="部署环境" prop="environment">
            <el-select
              v-model="deployForm.environment"
              placeholder="请选择部署环境"
              class="w-full"
            >
              <el-option label="开发环境" :value="DeployEnvironment.DEVELOPMENT" />
              <el-option label="测试环境" :value="DeployEnvironment.TESTING" />
              <el-option label="生产环境" :value="DeployEnvironment.PRODUCTION" />
            </el-select>
          </el-form-item>

          <el-form-item label="部署人" prop="deployed_by">
            <el-input v-model="deployForm.deployed_by" placeholder="请输入部署人姓名" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deployDialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="deployLoading" @click="handleDeploySubmit">
            确认部署
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { Search, Document, Refresh } from '@element-plus/icons-vue'
import {
  getDeployDirectories,
  scanDirectoryFiles,
  deployFromLocalFile
} from '@/request/deploy-api'
import {
  DeployEnvironment,
  type DeployDirectory,
  type FileInfo
} from '@/model/deploy-model'

defineOptions({
  name: 'LocalDeploy'
})

// 路由
const router = useRouter()

// 目录相关
const directories = ref<DeployDirectory[]>([])
const directoriesLoading = ref(false)
const selectedDirectoryId = ref<string>('')
const selectedDirectory = computed(() => 
  directories.value.find(d => d.id === selectedDirectoryId.value)
)

// 文件相关
const files = ref<FileInfo[]>([])
const filesLoading = ref(false)
const fileFilter = ref('')
const sortOption = ref('time-desc')
const selectedFile = ref<FileInfo | null>(null)
const selectedVersion = ref<string>('')

// 部署对话框
const deployDialogVisible = ref(false)
const deployLoading = ref(false)
const deployFormRef = ref<FormInstance>()
const deployForm = reactive({
  environment: DeployEnvironment.DEVELOPMENT,
  deployed_by: 'admin',
  version: ''
})

// 表单验证规则
const rules = reactive<FormRules>({
  environment: [
    { required: true, message: '请选择部署环境', trigger: 'change' }
  ],
  deployed_by: [
    { required: true, message: '请输入部署人', trigger: 'blur' }
  ],
  version: [
    { required: true, message: '版本号不能为空', trigger: 'blur' }
  ]
})

// 过滤和排序后的文件列表
const filteredFiles = computed(() => {
  let result = files.value
  
  // 应用过滤
  if (fileFilter.value) {
    const lowerFilter = fileFilter.value.toLowerCase()
    result = result.filter(file => 
      file.file_name.toLowerCase().includes(lowerFilter) ||
      file.version.toLowerCase().includes(lowerFilter)
    )
  }
  
  // 应用排序
  result = [...result].sort((a, b) => {
    switch (sortOption.value) {
      case 'time-desc':
        return new Date(b.modified_time).getTime() - new Date(a.modified_time).getTime()
      case 'time-asc':
        return new Date(a.modified_time).getTime() - new Date(b.modified_time).getTime()
      case 'size-desc':
        return b.size_bytes - a.size_bytes
      case 'size-asc':
        return a.size_bytes - b.size_bytes
      case 'name-asc':
        return a.file_name.localeCompare(b.file_name)
      case 'name-desc':
        return b.file_name.localeCompare(a.file_name)
      default:
        return 0
    }
  })
  
  return result
})

// 获取部署目录列表
const fetchDirectories = async () => {
  directoriesLoading.value = true
  try {
    console.log('开始获取部署目录列表...')
    const response = await getDeployDirectories()
    console.log('目录列表返回数据:', response)
    
    if (response.code === 0 && response.data) {
      directories.value = response.data.directories || []
      console.log(`成功获取到 ${directories.value.length} 个部署目录:`, directories.value)
      
      if (directories.value.length === 0) {
        ElMessage.warning('没有找到可用的部署目录')
      } else {
        ElMessage.success(`成功获取 ${directories.value.length} 个部署目录`)
      }
    } else {
      console.error('获取目录失败:', response.errorMsg)
      ElMessage.error(response.errorMsg || '获取部署目录列表失败')
    }
  } catch (error) {
    console.error('获取部署目录列表失败:', error)
    ElMessage.error('获取部署目录列表失败')
  } finally {
    directoriesLoading.value = false
  }
}

/**
 * 刷新项目版本列表
 * 当用户点击刷新按钮时调用
 */
const refreshVersions = async () => {
  if (!selectedDirectoryId.value) {
    ElMessage.warning('请先选择项目')
    return
  }
  
  // 重新获取当前选中项目的版本列表
  ElMessage.info(`正在刷新项目 ${selectedDirectory.value?.name} 的版本列表...`)
  await fetchDirectoryFiles(selectedDirectoryId.value)
}

/**
 * 处理项目选择变更
 * 当用户选择项目后自动触发
 */
const handleDirectoryChange = async (directoryId: string) => {
  // 清除选中项目时的处理
  if (!directoryId) {
    files.value = []
    selectedVersion.value = ''
    selectedFile.value = null
    deployForm.version = ''
    console.log('清除选中项目，重置版本列表')
    return
  }
  
  console.log(`选择了项目ID: ${directoryId}, 开始获取版本列表`)
  ElMessage.info(`正在获取项目 ${directoryId} 的可部署版本...`)
  
  // 先清除旧数据
  files.value = []
  selectedVersion.value = ''
  selectedFile.value = null
  deployForm.version = ''
  
  // 获取项目版本列表，触发版本获取
  try {
    await fetchDirectoryFiles(directoryId)
  } catch (error) {
    console.error('获取项目版本列表失败:', error)
    ElMessage.error('获取项目版本列表失败，请检查接口配置')
  }
}

/**
 * 获取项目的可部署版本列表
 * 当用户选择项目时自动触发
 * @param directoryId 项目目录ID
 */
const fetchDirectoryFiles = async (directoryId: string) => {
  // 设置加载状态
  filesLoading.value = true
  
  // 清空之前的数据
  files.value = []
  selectedVersion.value = ''
  selectedFile.value = null
  
  try {
    console.log(`发起API请求: /file-scan/scan/${directoryId}`)
    const startTime = Date.now()
    
    // 发起获取版本列表请求
    const response = await scanDirectoryFiles(directoryId)
    const endTime = Date.now()
    console.log(`版本列表请求完成，耗时: ${endTime - startTime}ms`)
    console.log('接口返回数据:', response)
    
    if (response.code === 0 && response.data) {
      // 正确获取版本列表
      files.value = response.data.files || []
      console.log(`成功获取到 ${files.value.length} 个版本`)
      
      if (files.value.length === 0) {
        // 未找到版本
        console.log('选中的项目中没有可用的部署版本')
        ElMessage.warning(`项目 '${selectedDirectory.value?.name}' 中未找到可部署的版本文件`)
        return
      }
      
      // 默认按修改时间倒序排序
      sortOption.value = 'time-desc'
      
      // 按修改时间排序，选择最新的文件作为默认选项
      const sortedFiles = [...files.value].sort((a, b) => 
        new Date(b.modified_time).getTime() - new Date(a.modified_time).getTime()
      )
      
      // 默认选择最新的文件
      selectedFile.value = sortedFiles[0]
      
      // 自动选择第一个版本
      if (selectedFile.value) {
        // 同时设置选中的版本 (与下拉框联动)
        selectedVersion.value = selectedFile.value.file_name
        
        // 更新部署表单中的版本号
        deployForm.version = selectedFile.value.version
        
        console.log(`默认选择最新版本: ${selectedFile.value.version}, 文件: ${selectedFile.value.file_name}`)
        
        // 显示成功提示
        ElMessage({
          type: 'success',
          message: `已加载 ${files.value.length} 个版本，默认选择最新版本: ${selectedFile.value.version}`,
          duration: 3000
        })
      }
    } else {
      // API返回错误
      console.error('获取版本列表失败:', response.errorMsg)
      ElMessage.error(response.errorMsg || `获取项目 '${selectedDirectory.value?.name}' 的版本列表失败`)
    }
  } catch (error) {
    // 请求异常
    console.error('请求版本列表失败:', error)
    ElMessage.error(`获取项目版本列表时出现错误，请检查接口配置或网络状态`)
  } finally {
    // 结束加载状态
    filesLoading.value = false
  }
}

// 选择文件行样式
const getRowClassName = ({ row }: { row: FileInfo }) => {
  if (selectedFile.value && row.file_name === selectedFile.value.file_name) {
    return 'selected-row'
  }
  return ''
}

/**
 * 处理版本选择变更
 * 当用户选择版本时触发
 */
const handleVersionChange = (fileName: string) => {
  console.log(`选择的版本文件名: ${fileName}`)
  
  // 清除选择
  if (!fileName) {
    selectedFile.value = null
    deployForm.version = ''
    return
  }
  
  // 根据文件名获取对应的文件信息
  const file = files.value.find(f => f.file_name === fileName)
  if (file) {
    console.log('选择版本详情:', file)
    selectedFile.value = file
    
    // 更新部署表单中的版本号
    deployForm.version = file.version
    
    // 显示版本信息
    ElMessage({
      type: 'success',
      message: `已选择版本: ${file.version} (${file.build_date})`,
      duration: 2000
    })
    
    // 滚动到文件列表中对应的项
    // 这里可以添加选中高亮效果，类似选择环境后服务器列表过滤效果
    // TODO: 如果有表格引用，可以滚动到对应行
  } else {
    // 找不到文件信息，清空选择
    selectedFile.value = null
    deployForm.version = ''
    ElMessage.warning('所选版本不存在，请重新选择')
  }
}

/**
 * 处理文件列表中的项选择
 * 当用户在表格中点击某个版本时触发
 */
const handleSelectFile = (row: FileInfo) => {
  console.log('表格中选择版本:', row.file_name)
  
  // 更新选中文件
  selectedFile.value = row
  
  // 同步更新选择的版本 (与下拉框联动)
  selectedVersion.value = row.file_name
  
  // 更新部署表单中的版本号
  deployForm.version = row.version
  
  // 显示选中提示
  ElMessage({
    type: 'info',
    message: `从列表中选择版本: ${row.version}`,
    duration: 1500
  })
}

// 选择文件进行部署
const selectFileToDeply = (file: FileInfo) => {
  selectedFile.value = file
  deployDialogVisible.value = true

  // 预先填充部署表单中的版本号
  deployForm.version = file.version
}

// 提交部署
const handleDeploySubmit = async () => {
  if (!deployFormRef.value) return
  
  await deployFormRef.value.validate(async (valid) => {
    if (valid && selectedFile.value && selectedDirectory.value) {
      deployLoading.value = true
      
      try {
        const deployRequest = {
          directory_id: selectedDirectory.value.id,
          file_name: selectedFile.value.file_name,
          environment: deployForm.environment,
          deployed_by: deployForm.deployed_by,
          version: deployForm.version // 添加版本号参数
        }
        
        const response = await deployFromLocalFile(deployRequest)
        
        if (response.code === 0) {
          ElMessage.success('部署请求已提交')
          deployDialogVisible.value = false
          
          // 部署成功后跳转到部署列表页面
          router.push('/deploy/list')
        } else {
          ElMessage.error(response.errorMsg || '部署失败')
        }
      } catch (error) {
        console.error('部署失败:', error)
        ElMessage.error('部署失败')
      } finally {
        deployLoading.value = false
      }
    }
  })
}

// 测试获取目录列表
const testFetchDirectories = async () => {
  console.log('测试获取目录列表')
  ElMessage.info('开始获取部署目录列表...')
  await fetchDirectories()
  
  // 如果有目录，自动选择第一个
  if (directories.value.length > 0) {
    selectedDirectoryId.value = directories.value[0].id
    ElMessage.info(`自动选择目录: ${directories.value[0].name}`)
    // 触发目录选择变更
    await handleDirectoryChange(selectedDirectoryId.value)
  }
}

// 返回
const goBack = () => {
  router.push('/deploy/list')
}

// 页面加载时获取部署目录列表
onMounted(async () => {
  try {
    console.log('页面加载，初始化数据...')
    // 清除旧数据
    files.value = []
    selectedVersion.value = ''
    selectedFile.value = null
    deployForm.version = ''
    
    // 加载目录列表
    await fetchDirectories()
    
    if (directories.value.length === 0) {
      console.log('没有可用的部署目录')
      return
    }
    
    console.log('目录列表加载完成，准备自动选择第一个目录')
    
    // 添加延迟自动选择第一个目录
    setTimeout(async () => {
      try {
        if (directories.value.length > 0 && !selectedDirectoryId.value) {
          const firstDir = directories.value[0]
          console.log(`自动选择第一个目录: ${firstDir.name} (ID: ${firstDir.id})`)
          selectedDirectoryId.value = firstDir.id
          
          // 触发文件列表加载
          await handleDirectoryChange(selectedDirectoryId.value)
          
          // 确保版本选择列表可见
          if (files.value.length > 0) {
            ElMessage.success(`已加载 ${files.value.length} 个版本，请选择需要部署的版本`)
          } else {
            ElMessage.warning('目录中未找到可部署的文件')
          }
        }
      } catch (error) {
        console.error('自动选择目录失败:', error)
      }
    }, 1000) // 增加延迟时间确保目录加载完成
  } catch (error) {
    console.error('初始化失败:', error)
    ElMessage.error('初始化失败，请刷新页面重试')
  }
})
</script>

<style scoped lang="scss">
.local-deploy {
  .el-table {
    :deep(.selected-row) {
      background-color: var(--el-color-primary-light-9);
    }
  }
}
</style>
